<template>
	<div class="horizon-goodsitem-wrap">
		<div class="vertical-goodsitem-container">
			<div class="single" v-for="(goodsItem, index) in goods" :key="index" :style="getStyleWidth(goodsItem, index)">
				<img :src="goodsItem.image" @click="openPage(goodsItem, configData)">
				<video-cover-start :goods-item="goodsItem" @click="openPage(goodsItem, configData)"></video-cover-start>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'horizonOneGoodsitem',
		props: {
			configData: {
				type: Object,
				default() {
					return {
						width: 1080,
						backgroundImage: "",
						goods: []
					}
				}
			}
		},
		data(){
			var ratio;
			ratio = document.body.clientWidth/this.configData.width
			if(ratio>1) {
				ratio = 1
			}
			return {
				width: this.configData.width,
				ratio: ratio,
				backgroundImage:  this.configData.backgroundImage,
				goods: this.configData.goods,
			}
		},
		methods: {
			getStyleWidth(goodsItem, index) {
				return {
					width: Math.round(goodsItem.width*this.ratio)+'px'
				}
			}
		}
	}
</script>
<style>
	.one-goodsitem-wrap {
		position: relative;
	}
	.one-goodsitem-wrap img {
		width: 100%;
	}
</style>